<template>
  <div class="address-list">
    <ul class="address" v-infinite-scroll="getListb" infinite-scroll-disabled="nonext" infinite-scroll-distance="10"
        infinite-scroll-immediate-check="false">
      <li class="addressitem" v-for="(item,index) in list" :key="index" :id="item.id">
        <div class="up">
          <p class="name"><label>{{item.consignee}}</label><label>{{item.phone}}</label></p>
          <p class="detail">{{item.province.name}}{{item.city.name}}{{item.district.name}}{{item.address}}</p>
        </div>
        <div class="down">
          <div class="left">
            <label :class=" {active:radioSelect==item.id}" @click="setAddress(item.id,index)">默认地址</label>
          </div>
          <div class="right">
            <router-link class="edit" :to="'/add-address?flag=edit&id='+item.id">编辑</router-link>
            <label class="del" @click.stop="delAddress(item.id,index)">删除</label>
          </div>
        </div>
      </li>
      <li class="noaddress" v-if="list.length==0">
        <p style="font-size:0.3rem;color:#999;margin-bottom:0.2rem;">暂时没有记录</p>
        <p style="font-size:0.26rem;color:#c5c5c5;">新建地址让娃娃飞到你的身边~</p>
      </li>
    </ul>
    <div class="order_hint_box">
      <div class="order_hint_content">
        <div class="order_hint_background">
          <div class="order_hint_tit"></div>
        </div>
      </div>
    </div>
    <router-link to="/add-address" class="allget">
      <button>新建地址</button>
    </router-link>
  </div>
</template>
<script>
import { InfiniteScroll } from "mint-ui";
import { Toast } from "mint-ui";
import { Indicator } from "mint-ui";
export default {
  data: function() {
    return {
      radioSelect: "",
      page: 1,
      list: [],
      nonext: true,
      token: this.$route.query.token,
      headerData: {}
    };
  },
  beforeMount: function() {
    this.list = [];
  },
  components: {},
  created: function() {
    this.getListb();
  },
  methods: {
    setAddress: function(id, index) {
      Indicator.open("地址更新中...");
      this.radioSelect = id;
      var config = {
        method: "post",
        data: {
          id: id,
          district_id: this.list[index].district.id,
          address: this.list[index].address,
          consignee: this.list[index].consignee,
          phone: this.list[index].phone,
          is_default: 1,
          _method: "put"
        }
      };
      api
        .fetch("/api/addresses/" + id, config)
        .then(res => {
          Indicator.close();
          Toast("更新成功！");
        })
        .catch();
    },
    delAddress: function(id, index) {
      Indicator.open("正在删除...");
      api
        .fetch("/api/addresses/" + id, {
          method: "post",
          data: {
            _method: "delete"
          }
        })
        .then(res => {
          // this.list.splice(index, 1);
          this.list = [];
          Toast({
            message: "删除成功！",
            iconClass: "mint-toast-icon mintui mintui-success"
          });
          this.getListb();
        })
        .catch();
    },
    getListb: function() {
      Indicator.open("加载中...");
      var smData = {
        page: this.page,
        per_page: 15
      };
      api
        .fetch("/api/addresses")
        .then(res => {
          Indicator.close();
          if (res.meta.pagination.count > 0) {
            if (res.meta.pagination.per_page > res.meta.pagination.count) {
              this.nonext = true;
            } else {
              this.nonext = false;
            }
            if (this.length == 0) {
              this.list = res.data;
              this.page = this.page + 1;
            } else {
              this.list = this.list.concat(res.data);
              this.page = this.page + 1;
            }
            for (var i = 0; i < this.list.length; i++) {
              if (this.list[i].is_default == 1) {
                this.radioSelect = this.list[i].id;
                break;
              }
            }
          }
        })
        .catch();
    }
  }
};
import api from "@/assets/js/api";
</script>
<style scoped lang="less">
.address-list {
  padding: 0.3rem 0.3rem 1.3rem;
  background-color: #efefef;
  min-height: 100%;
  .noaddress {
    height: 100%;
    background: url("../../assets/images/plane.png") no-repeat 0.94rem 2.52rem;
    background-size: 4.99rem 2.67rem;
    text-align: center;
    padding-top: 7rem;
  }
  .addressitem {
    box-sizing: border-box;
    background: #fff;
    padding: 0.3rem 0.3rem 0;
    margin-bottom: 0.3rem;
    border-radius: 0.2rem;
    .up {
      margin-bottom: 0.2rem;
      .name {
        font-size: 0.28rem;
        color: #333;
        height: 0.5rem;
        line-height: 0.5rem;
        margin-bottom: 0.06rem;
        overflow: hidden;
        label:first-child {
          margin-right: 0.3rem;
        }
      }
      .detail {
        font-size: 0.24rem;
        color: #686868;
        height: 0.72rem;
        line-height: 0.36rem;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
    .down {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 0.81rem;
      border-top: 0.01rem solid #e1e1e1;
      font-size: 0.26rem;
      color: #686868;
      .left {
        /*input + label {
            padding-left: 0.46rem;
            display: inline-block;
            background: url('../../assets/images/noselect.png') no-repeat left center;
            background-size: 0.36rem;
            height:0.38rem;
          }
          input:checked +label{
              background: url('../../assets/images/select.png') no-repeat left center;
              background-size: 0.36rem;
          }*/
        label {
          padding-left: 0.46rem;
          display: inline-block;
          background: url("../../assets/images/noselect.png") no-repeat left
            center;
          background-size: 0.36rem;
          height: 0.38rem;
          &.active {
            background: url("../../assets/images/select.png") no-repeat left
              center;
            background-size: 0.36rem;
          }
        }
      }
      .edit {
        display: inline-block;
        padding-left: 0.46rem;
        height: 0.36rem;
        background: url("../../assets/images/edit.png") no-repeat left center;
        background-size: 0.36rem;
        margin-right: 0.3rem;
      }
      .del {
        height: 0.32rem;
        display: inline-block;
        padding-left: 0.46rem;
        background: url("../../assets/images/del.png") no-repeat left center;
        background-size: 0.36rem;
        line-height: 0.36rem;
        height: 0.36rem;
      }
    }
  }
  .allget {
    width: 100%;
    padding: 0 0.3rem;
    box-sizing: border-box;
    position: fixed;
    left: 0rem;
    right: 0rem;
    bottom: 0rem;
    height: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    button {
      background: #09bb07;
      width: 100%;
      height: 1rem;
      text-align: center;
      font-size: 0.32rem;
      color: #fefefe;
      border: none;
      border-radius: 0.1rem;
    }
  }
}
</style>
